<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>File Manager</title>
	<script src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlx.js" type="text/javascript"></script>
	<script type="text/javascript" src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/jquery-2.1.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlx.css"/>
	<style>
		html, body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0px;
		}
	</style>
</head>
<body>
	<script type="text/javascript">
		var contextPath = "${pageContext.request.contextPath}" + "/resources/tutorial";
	
		dhtmlxEvent(window, "load", function() {
			var myLayout = new dhtmlXLayoutObject(document.body, "2U");
			myLayout.cells("a").setWidth(250);
			myLayout.cells("a").setText("Files");
			myLayout.cells("b").hideHeader();
			
			var myToolbar = myLayout.attachToolbar();
			myToolbar.setIconsPath(contextPath + "/common/dhtmlx/icons/");
			myToolbar.loadStruct(contextPath + "/tutorial2xml/toolbarStruct.xml");
			
			var myTree = myLayout.cells("a").attachTree();
			myTree.setImagePath(contextPath + "/common/dhtmlx/imgs/");
			
			var myGrid = myLayout.cells("b").attachGrid();
			myGrid.setImagePath(contextPath + "/common/dhtmlx/imgs/");    
			myGrid.setIconsPath(contextPath + "/common/dhtmlx/icons/");             
			myGrid.setHeader("&nbsp;,Name,Type,Modified,id"); 
			myGrid.setColTypes("img,ro,ro,ro,ro");            
			myGrid.setInitWidths("70,250,100,*,0");  
			myGrid.setColAlign("center,left,left,left");
			myGrid.init();
			myGrid.load(contextPath + "/tutorial2xml/gridData.xml");
			
			myTree.attachEvent("onSelect",  function(id){             
                myGrid.filterBy(4,id);                                
                return true;
            });
			
			myTree.loadXML(contextPath + "/tutorial2xml/treeStruct.xml",function(){          
                myGrid.load(contextPath + "/tutorial2xml/gridData.xml", function(){          
                    myTree.selectItem("books");                       
                })
            });
		});
	</script>
</body>
</html>